<a class="settings-nav-item {className}"
   id="settings-nav-item-{href}"
   aria-label={ariaLabel}
   rel="prefetch"
   {href} >
  {label}
</a>
<style>
  a.settings-nav-item {
    font-size: 1.2em;
  }

  a.settings-nav-item.selected {
    font-weight: 600;
  }
</style>
<script>
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    computed: {
      className: ({ page, name }) => page === name ? 'selected' : '',
      ariaLabel: ({ page, name, label }) => (
        formatIntl('intl.navItemLabel', {
          label,
          selected: page === name,
          name
        })
      )
    }
  }
</script>
